<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
    <meta name="format-detection" content="telephone=yes"/>
    <title>报销表格</title>
    <style>
*{margin: 0;padding: 0;}
        ul,li{list-style: none;}
        .wrapper{width: 210mm;}
        .box{width: 96%;margin: 0 auto;}
        .top{width: 100%;font-size: 12px;}
        .fr{float: right;}
        .dis-b{display: block;}
        .dis_in{display: inline-block;}
        .top-left{width: 65%;}
        .top-head{height: 30px;line-height: 30px;margin-top: 23px;}
        .top-head,.top-list{width: 100%;}
        .top-head img{width: 18%;height: 16px;margin-right: 20px;}
        .top-head span{font-size: 16px;height: 19px;line-height: 19px;color: #000000;font-weight: 600;}
        .top-list{border: 1px solid #373737;}
        .top-list ul{margin: 10px 0;padding-left:3%;}
        .top-list ul li{line-height: 26px;}
        .top-ull{border-left: 1px solid #373737;width: 57%;}
        .top-right{width: 30%;text-align: center;word-break: break-all;margin-top: -2%;}
        .top-right p{text-align: left;}
.img-c img{width:100%;height:100%;display: block;}
        .table{border: 1px solid #373737;width: 100%;margin-top: 10px;border-collapse:collapse;}
        .table-bordered > tbody > tr > td,.table-bordered > thead > tr > th,.table-bordered > tfoot > tr > th{border: 1px solid #373737;}
        .table-bordered > thead > tr > th{height: 25px;line-height: 25px;text-align: center;}
        .table-bordered > tbody > tr > td{height:40px;font-size: 10px;color: #000000;padding: 2px 5px;}
        .table-bordered > tfoot > tr > th{height: 25px;line-height: 25px;color: #000000;padding: 2px 5px;}
        .tr1{text-align: center;width: 24%;}
        .tr2{text-align: center;width: 13%;}
        .tr3{width:48%;text-align: left;}
        .tr4{text-align: right;width: 14%;}
        .tr6{text-align: center;}
        .top-ul{float: left;width: 35%;}
        .img-c{width: 73px;height: 73px;margin: 0 auto;}
        .order-sp{text-align: left;}
        .order-kh1{width: 18%;display: inline-block;position: absolute;}
        .li-1{position: relative;}
        .order-kh{display: inline-block;width: 80%;line-height: initial;margin-left: 15%;margin-top: 2%;}

        /*底部签名*/
        .footer{width: 100%;margin-top: 15px;font-size: 12px;}
        .footer ul li{float: left;display: inline-block;width: 25%;height: 45px;line-height: 45px;}
        .footer ul li span{width: 40%;height: 35px;line-height: 35px;border-bottom: 1px solid #373737;display: inline-block}
    </style>
</head>
<body>
  <div class="wrapper">
      <div class="box">
          <div class="top-head">
              <img src="../images/Artboard%20110.png" alt="">
              <span>哈啰通用设备（上海）有限公司</span>
          </div>
          <div class="top">

          </div>
          <div class="content">
              <table class="table table-bordered">
                  <thead>
                  <tr>
                      <th class="tr1">日期</th>
                      <th class="tr2">项目</th>
                      <th class="tr3">事由</th>
                      <th class="tr4">金额</th>
                  </tr>
                  </thead>
                  <tbody class="tbody1">

                  </tbody>
                  <tfoot class="tfoots">

                  </tfoot>
              </table>
          </div>
          <div class="footer">
              <ul>
                  <li>申请人签名：<span></span></li>
                  <li>部门负责人签名：<span></span></li>
                  <li>财务复核：<span></span></li>
                  <li>财务经理签字：<span></span></li>
                  <li>总经理审批：<span></span></li>
                  <li>董事长审批：<span></span></li>
                  <li>收款人签名：<span></span></li>
              </ul>
          </div>
      </div>
  </div>
  <script src="../js/jquery-2.1.4.min.js"></script>

  <script type="text/javascript">

          webTop(1,2,3,4,6,83467);
         Sum(1,2);

          function webTop(sqbm,sqr,times,ddh,moneys,cost){
              var topHtml='';
              topHtml=
                  '<div class="top-left dis_in">'+
                  '<div class="top-list">'+
                  '<div>'+
                  '<ul class="dis_in top-ul">'+
                  '<li>申请部门：<span class="section">'+sqbm+'</span></li>'+
                  '<li>申请人：<span class="proposer">'+sqr+'</span></li>'+
                  '<li>申请日期：<span class="pro-data">'+times+'</span></li>'+
                  '</ul>'+
                  '<ul class="dis_in top-ull">'+
                  '<li >订单/项目号：<span class="order-num">'+ddh+'</span></li>'+
                  '<li class="li-1"><span class="order-kh1">客户：</span><span class="order-kh">中国废话佛后 觉得十六大精神</span></li>'+
                  '<li>订单/项目金额：<span class="order-money">'+moneys+'</span>元</li>'+
                  '</ul>'+
                  '</div>'+
                  '</div>'+
                  '</div>'+
                  '<div class="top-right dis_in fr">'+
                    '<div class="img-c">'+
                   '<img src="http://ov60ew0cr.bkt.clouddn.com/HoLo_QrCode_20170904133743">' +
                    '</div>'+
                  '<p class="dis-b order-sp">报销单号:<span class="order-n">444443897983759375</span></p>'+
                  '<p class="dis-b order-sp">成本中心:<span class="order-m">'+cost+'</span></p>'+
                  '</div>'

              $('.top').html(topHtml);

          }
   function Sum(money1,sums){
    var tfootHtml='';
          tfootHtml=    '<tr>'+
                        '<th class="tr1">合计</th>'+
                        '<th colspan="2" class="tr3 tr6">'+money1+'</th>'+
                        '<th class="tr4"><span class="sum">'+sums+'</span>.00</th>'+
                        '</tr>'
           $('.tfoots').html(tfootHtml);
}
          webView(1,2,3,4);
      function webView(Time,Item,Cause,Money){
          var tbodyHtml='';

//          for(var i = 0;i<data.length;i++){
//              var datas=data[i];
//              var Time=datas.time;
//              var Item=datas.item;
//              var Cause=datas.cause;
//              var Money=datas.money;
              tbodyHtml+='<tr class="tb">'+
                  '<td class="tr1">'+Time+'</td>'+
                  '<td class="tr2">'+Item+'</td>'+
                  '<td class="tr3">'+Cause+'</td>'+
                  '<td class="tr4"><span class="spp">'+Money+'</span></td>'+
                  '</tr>'
//          }
          $('.tbody1').html(tbodyHtml);
      }

  </script>

</body>
</html>
